<template>
  <div class="app-container">
    <el-form ref="form" :model="form" append-to-body label-width="110px">
      <el-col :span="13">
        <el-form-item label="获取地址" class="form-item">
          <el-button type="primary" size="small" @click="openMap">获取地址</el-button>
        </el-form-item>
      </el-col>
      <el-col :span="13">
        <el-form-item label="所属省份" class="form-item">
          <el-input v-model="form.province" style="width: 400px" size="small" placeholder="所属省份" />
        </el-form-item>
      </el-col>
      <el-col :span="13">
        <el-form-item label="所属城市" class="form-item">
          <el-input v-model="form.city" style="width: 400px" size="small" placeholder="所属城市" />
        </el-form-item>
      </el-col>
      <el-col :span="13">
        <el-form-item label="所属行政区" class="form-item">
          <el-input v-model="form.district" style="width: 400px" size="small" placeholder="所属行政区" />
        </el-form-item>
      </el-col>
      <el-col :span="13">
        <el-form-item label="经度" class="form-item">
          <el-input v-model="form.longitude" style="width: 400px" size="small" placeholder="经度" />
        </el-form-item>
      </el-col>
      <el-col :span="13">
        <el-form-item label="纬度" class="form-item">
          <el-input v-model="form.latitude" style="width: 400px" size="small" placeholder="纬度" />
        </el-form-item>
      </el-col>
      <el-col :span="13">
        <el-form-item label="详细地址" class="form-item">
          <el-input style="width: 400px" v-model="form.address" size="small" placeholder="详细地址" />
        </el-form-item>
      </el-col>
      <el-col :span="15">
        <WebSocket></WebSocket>
      </el-col>
    </el-form>
    <Map ref="map" @close="$refs.map.close()" @updateLocation="updateLocation" />
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import Map from './map.vue'
import WebSocket from '@/components/WebSocket/WebSocket'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
  name: 'Dashboard',
  computed: { ...mapGetters(['name']) },
  // eslint-disable-next-line vue/no-unused-components
  components: { Map, WebSocket, Editor, Toolbar },
  data() {
    return {
      form: {
        province: '湖南省',
        city: '永州市',
        district: '零陵区',
        address: '零陵古城',
        latitude: '26.21453', // 纬度
        longitude: '111.607858' // 经度
      }
    }
  },
  methods: {
    openMap() {
      if (this.form.longitude === 'undefined' && this.form.latitude === 'undefined') {
        this.$refs.map.open()
      } else {
        this.$refs.map.open(this.form)
      }
    },
    updateLocation(orgAddr, lon, lat, province, city, district) {
      this.form = {
        address: orgAddr,
        province: province,
        city: city,
        latitude: lat, // 纬度
        longitude: lon, // 经度
        district: district
      }
    }
  }
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.amap-demo {
  height: 700px;
}
</style>
